<template>
  <view class="login-container">
    <!-- 车企品牌Logo -->
    <!-- <image class="logo" src="/static/images/car-brand-logo.png" mode="aspectFit"></image> -->
    <view class="logo">
    	<view>
    		<image src="@/static/img/logo/logo4.png" class="logo-image" mode="aspectFit"></image>
    	</view>
    	<view>
    		<text class="app-name">Magicwayz</text>
    	</view>
    </view>
		
		<!-- 定位描述区域 -->
		<view class="description">
			<view> 
				<text class="title">快速 <text class="highlight1">定位</text> 附近门店</text>
			</view>
		  <view class="top-2">
				<text class="subtitle">锁定周边门店一站式服务，纵享便捷</text>
			</view>
		</view>
		
    <!-- 登录表单 -->
    <view class="login-form">
      <!-- Google登录按钮 -->
      <button class="google-login-btn" @click="handleGoogleLogin" :disabled="loading">
        <!-- <image src="/static/images/google-logo.png" mode="aspectFit"></image> -->
        <text>使用Google账号登录</text>
        <!-- <loading v-if="loading" class="loading"></loading> -->
      </button>
      
			
      <!-- 隐私条款 -->
      <view class="privacy-text">
        登录即表示您同意我们的<text class="highlight">用户协议</text>和<text class="highlight">隐私政策</text>
      </view>
    </view>
  </view>
</template>

<script>
import GoogleAuth from '@/common/google-auth.js';

export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    async handleGoogleLogin() {
      // this.loading = true;
			 uni.showLoading({
			      title: '登录中...',
			      mask: true
			    });
      try {
        // 1. 获取Google授权码
        const authUrl = GoogleAuth.generateAuthUrl();
    //     const [err, res] = await new Promise(resolve => {
				// 	uni.login({
				// 		provider: 'google',
				// 		success: resolve,
				// 		fail: resolve
				// 	});
				// });
				// if (err) throw new Error('授权失败');
				
         // 2. 发送code到后端
				// const { code } = res;
				// const apiRes = await uni.request({
				// 	url: 'https://your-api.com/auth/google',
				// 	method: 'POST',
				// 	data: { code },
				// 	header: { 'Content-Type': 'application/json' }
				// });
				
				// // 3. 保存登录状态
				// uni.setStorageSync('token', apiRes.data.token);
				// uni.setStorageSync('userInfo', apiRes.data.user);
				
				// 4. 跳转首页（关键步骤）
				uni.reLaunch({
					url: '/pages/tabbar/index/main/index'
				});
        
      } catch (error) {
        uni.showToast({
          title: '登录失败: ' + error.message,
          icon: 'none'
        });
      } finally {
				uni.hideLoading();
			}
    },
    
    async handleAuthResult(event) {
      try {
        const { code, error } = event;
        if (error) throw new Error(error);
        
        // 1. 获取用户信息
        const userInfo = await GoogleAuth.handleAuthCallback(code);
        
        // 2. 检查是否绑定车辆(车企特有逻辑)
        const hasCar = await this.checkCarBinding(userInfo.email);
        
        // 3. 保存登录状态
        uni.setStorageSync('userInfo', userInfo);
        uni.setStorageSync('token', 'generated-token');
        
        // 4. 跳转到不同页面
        if (hasCar) {
          uni.reLaunch({ url: '/pages/home/index' });
        } else {
          uni.navigateTo({ url: '/pages/bind-car/index' });
        }
        
      } catch (error) {
        uni.showToast({
          title: error.message,
          icon: 'none'
        });
      } finally {
        this.loading = false;
        uni.$off('googleAuthResult', this.handleAuthResult);
      }
    },
    
    async checkCarBinding(email) {
      // 调用API检查用户是否绑定车辆
      const res = await uni.request({
        url: 'https://your-api.com/user/check-car',
        method: 'POST',
        data: { email }
      });
      return res.data.hasCar;
    }
  }
};
</script>

<style scoped>
.login-container {
  height: 100vh;
  background: #f3eeda;
  display: flex;
  flex-direction: column;
  align-items: center;
	box-sizing: border-box;
}

/* Logo 区域 */
.logo {
  margin-top: 220rpx;
  text-align: center;
}

.logo-image {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 10rpx;
}
.app-name {
  font-size: 50rpx;
  font-weight: bold;
  color: #f87b23;
}
/* 描述区域 */
.description {
  text-align: center;
	margin-top: 230rpx;
	margin-bottom: 200rpx;
}
.title {
  font-size: 50rpx;
  color: #333;
}

.highlight1 {
  color: #f87b23;
}
.top-2{
	margin-top: 30rpx;
}
.subtitle {
  font-size: 28rpx;
  color: #999;
}
.login-form {
  width: 100%;
  max-width: 600rpx;
}

.google-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  background: #fff;
  border: 1rpx solid #ddd;
  border-radius: 45rpx;
  font-size: 32rpx;
  color: #444;
  position: relative;
}

.google-login-btn image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.loading {
  position: absolute;
  right: 30rpx;
}

.privacy-text {
  margin-top: 60rpx;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.highlight {
  color: #007AFF;
  margin: 0 10rpx;
}
</style>